<template>
  <div class="tableSearch">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small">
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title" maxlength="20" size="small" placeholder="请输入标题" clearable></el-input>
      </el-form-item> <br>
      <el-form-item label="背景图" prop="backgroundMap">
        <div style="margin-top:-1px;font-size:13px;color:#bbb;"><span>选择样例，可自定义H5的背景色</span></div>
        <div class="Imgbox" style="float:left; width:250px;height:150px; display:inline-block;margin-right:10px;margin-left:10px;margin-top:20px;" v-for="(item,index) in ruleForm.backgroundMap" :key="index" @click="firstIm(index)">
          <img class="boxImg" style="width:100%;height:100%;" :src="item" alt="">
        </div>
      </el-form-item>
      <el-form-item style="margin-left:350px">
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button type="primary" @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import util from "@/util";
import { saveOrUpdateH5, selectH5Details } from "@/api";
import { mapState } from "vuex";
import templateOne from "@/assets/images/templateOne.png";
import templateTwo from "@/assets/images/templateTwo.png";
import templateThree from "@/assets/images/templateThree.png";
export default {
  data() {
    return {
      h5Id: "",
      templateOne,
      templateTwo,
      templateThree,
      ruleForm: {
        title: "",
        backgroundMap: []
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        backgroundMap: [
          { required: true, message: "请选择背景图", trigger: "blur" }
        ]
      },
      backgroundImg: "" //选中每个图片
    };
  },
  mounted() {
    this.background();
    this.detail();
  },
  computed: mapState(["merchantId"]),
  methods: {
    // 查看详情
    detail() {
      this.h5Id = util.getQuery().h5Id;
      let that = this;
      let data = {
        id: that.h5Id
      };
      selectH5Details(data).then(res => {
        var imgs = document.getElementsByClassName("Imgbox");
        this.ruleForm.title = res.data.title;
        if (res.data.checkedRecourceId === "0") {
          imgs[0].style.boxShadow = "0px 0px 5px #0d9cf0";
          imgs[0].style.transform = "scale(1.15)";
          imgs[0].style.transition = "all 0.6s";
          this.backgroundImg = res.data.checkedRecourceId;
        } else if (res.data.checkedRecourceId === "1") {
          imgs[1].style.boxShadow = "0px 0px 5px #0d9cf0";
          imgs[1].style.transform = "scale(1.15)";
          imgs[1].style.transition = "all 0.6s";
          this.backgroundImg = res.data.checkedRecourceId;
        } else if (res.data.checkedRecourceId === "2") {
          imgs[2].style.boxShadow = "0px 0px 5px #0d9cf0";
          imgs[2].style.transform = "scale(1.15)";
          imgs[2].style.transition = "all 0.6s";
          this.backgroundImg = res.data.checkedRecourceId;
        }
      });
    },
    // 背景色样例
    background() {
      var arr = [];
      arr.push(this.templateOne);
      arr.push(this.templateTwo);
      arr.push(this.templateThree);
      this.ruleForm.backgroundMap = arr;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = {
            id: this.h5Id,
            url: "",
            checkedRecourceId: this.backgroundImg,
            title: this.ruleForm.title,
            companyId: this.merchantId
          };
          if (this.backgroundImg !== "") {
            saveOrUpdateH5(data).then(res => {
              if(res.code == 200) {
                this.$message.success(res.msg)
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg)
              }
            });
          } else {
            this.$message.error('请选择背景图')
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.go(-1);
    },
    firstIm(el) {
      var imgs = document.getElementsByClassName("Imgbox");
      var img = imgs[el].getElementsByClassName("boxImg");
      for (var i = 0; i < imgs.length; i++) {
        if (i == el) {
          imgs[i].style.boxShadow = "0px 0px 5px #0d9cf0";
          imgs[i].style.transform = "scale(1.15)";
          imgs[i].style.transition = "all 0.6s";
        } else {
          imgs[i].style.boxShadow = null;
          imgs[i].style.transform = "scale(1)";
          imgs[i].style.transition = "all 0.6s";
        }
      }
      this.backgroundImg = el;
    }
  }
};
</script>
